<script setup >
  import { ref } from 'vue'

  const value = ref('')
  const input =ref('')
  const options = [
  {
    value: '中国大陆 +86',
    label: '中国大陆 +86',
  },
  {
    value: '中国香港 +852',
    label: '中国香港 +852',
  },
  {
    value: '中国澳门 +853',
    label: '中国澳门 +853',
  },
  {
    value: '中国台湾 +886',
    label: '中国台湾 +886',
  },
]
</script>



<template>
  <div class="page">
    <div class='header'>
        <div class="logo">
            <img src="/src/assets/images/logo.png" alt="logo">
            <h2>用户注册</h2>
        </div>
        
    </div>
  </div>

  <div class="container">
    <div class="reg">
      <div class="header"></div>
      <div class="reg-form">
        <div class="reg-form-item">
          <label class="reg-form-item-label">手机号码</label>
          <div class="am-list-item am-input-item am-list-item-middle">
            <div class="am-list-line">
              <div class="am-input-label am-input-label-5">
                <div class="country-select" id="10086">
                  <div class="country-code">
                    <el-select v-model="value" class="country-select-list-item" placeholder="中国大陆 +86" >
                     <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      />
                     </el-select>
                  </div> 
                   <div class="am-input-control">
                     <input class="input-size" type="text" value placeholder="请输入你的手机号码">
                   </div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <div class="reg-form-item"></div>
        <div class="input-code">
          <el-input v-model="input" placeholder="输入验证码">
          <template #append> <a href="">发送验证码</a> </template>
        </el-input>
       </div>
        <div class="reg-form-item"></div>
        <a class="submit-bth" role="button"><span>注册</span></a>
        <div class="fm-agreement">
          <el-checkbox v-model="check" label="已阅读并同意以下协议" />
          <label class="fm-agreement-text" for="fm-agreement-checkbox">
            <a href="">淘宝平台服务协议</a>,
            <a href="">隐私权政策</a>,
            <a href="">法律声明</a>,
            <a href="">支付宝及客户端服务协议</a>
          </label>
        </div>
        <div class="to-email-reg">
          <a href="">切换成企业账号注册</a>
        </div>
      </div>
    </div>
  </div>
</template>



<style>
.page {
    width: 990px;
    height: 83px;
    margin: 0 auto;
    color: #1c1a1a;
}
.header {
    position: relative;
    height: 82px;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
}
.logo{
  width: 300px;
  height: 100px;
}
.logo img {
    display: inline-block;
    width: 160px;
    height: 80px;
    vertical-align: middle;
    background: fixed;
}
.logo h2 {
    display: inline-block;
    height: 43px;
    line-height: 43px;
    margin-left: 6px;
    font-weight: 400;
}
.country-select-list{
  display: none;
}

.reg{
  width: 1240px;
  height: 910px;
}
.reg-form{
  width: 380px;
  height: 350px;
  margin-right: auto;
  margin-left: auto;
}
.reg-form-item{
  width: 380px;
  height: 30px;
}
.reg-form-item-label {
    position: absolute;
    line-height: 36px;
    width: 420px;
    left: -1px;
    text-align: right;
}
.am-list-line{
  border: 1px solid #d6d6d6;
}
.am-input-control{
  margin-left: 140px;
  margin-top: -38px;
}
.country-select {
    width: 140px;
    height: 36px;
    line-height: 36px;
    border-right: 1px solid #d6d6d6;
    position: relative;
}
.areaName {
    width: 85px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.areaCode{
    margin-left: 3px;
    margin-right: 100px;
    white-space: nowrap;
}
.select-arrow {
    background: url(https://gw.alicdn.com/tfs/TB1VHh7veL2gK0jSZFmXXc7iXXa-10-7.png);
    width: 10px;
    height: 7px;
    display: inline-block;
    margin-right: 300px;
}
.el-checkbox{
  margin-right: 5px
}
.input-size{
  height: 35px;
  width: 240px;
}
.submit-bth{
  display: block;
  width: 378px;
  height: 36px;
  background-color: rgb(227, 131, 14);
  font-size: 25px;
  text-align: center;
}
.fm-agreement-text a{
color: rgb(227, 131, 14);
}
.to-email-reg{
  text-align: right;
  height: 50px;
}
.to-email-reg a{
  color: rgb(227, 131, 14);
}
.country-select-list-item{
  height: 35px;
}
</style>